<template>
  <div class="bigscreen">
    <!-- 头部盒子 -->
    <div class="head">
      <div class="toManager">
        <el-button @click="toManagerWorld" icon="el-icon-s-data" type="primary"
          >点此进入世界大屏</el-button
        >
        <el-button @click="toManagerLogin" icon="el-icon-s-promotion"
          >点此进入后台</el-button
        >
        <el-button
          @click="fullScreen"
          icon="el-icon-full-screen"
          type="info"
          circle
        ></el-button>
      </div>
      <h1>新冠疫情数据大屏（中国）</h1>
      <div class="showTime">
        现在是{{ nowDate }} 选择数据时间：<el-date-picker
          v-model="selectdate.date"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          :clearable="false"
          :editable="false"
          :picker-options="pickerOptions"
          prefix-icon="prefix-icon-class"
          style="width: 170px"
          size="mini"
          class="datepicker"
        >
        </el-date-picker>
      </div>
    </div>
    <!-- 页面主体盒子 -->
    <div class="mainbox">
      <!-- 左边的盒子 -->
      <div class="column">
        <!-- 分成三个盒子 长度不一样 -->
        <div class="panellong citycovrank">
          <h2>
            累计确诊排名（TOP10）<el-link
              @click="changeCityDataTableVisible()"
              :underline="false"
              >查看<i class="el-icon-view el-icon--right"></i>
            </el-link>
          </h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panelsmall proportion">
          <h2>占比</h2>
          <div class="chart1"></div>
          <div class="chart2"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panelmid pie">
          <h2>
            新闻列表
            <el-link
              @click="changeNewsDataTableVisible()"
              :underline="false"
              type="info"
              >查看<i class="el-icon-view el-icon--right"></i>
            </el-link>
          </h2>
          <div class="chart">
            <dv-scroll-board :config="newsConfig" />
          </div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <!-- 中间的盒子 就是装地图及数据的 -->
      <div class="column">
        <div class="no">
          <div class="no-hd">
            <ul v-if="proportion">
              <li class="new">{{ proportion[0].new }}</li>
              <li>{{ proportion[0].now }}</li>
              <li>{{ proportion[0].diagnosed }}</li>
              <li class="dead">{{ proportion[0].dead }}</li>
              <li class="cure">{{ proportion[0].cure }}</li>
            </ul>
          </div>
          <div class="no-bd">
            <ul>
              <li>新增确诊</li>
              <li>现有确诊</li>
              <li>累计确诊</li>
              <li>死亡病例</li>
              <li>治愈病例</li>
            </ul>
          </div>
        </div>
        <!-- 地图数据盒子以及动态图 -->
        <div class="map">
          <div class="chart"></div>
          <div class="map1"></div>
          <div class="map2"></div>
          <div class="map3"></div>
        </div>
      </div>
      <!-- 右边的盒子 -->
      <div class="column">
        <div class="panelmid covline">
          <h2>趋势</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panellong covworld">
          <h2>世界疫苗接种数据（按剂次排序）</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panelsmall water">
          <h2>
            <p>中国疫情死亡率及</p>
            <p>疫苗接种率（每人按三针计算）</p>
          </h2>
          <div class="chart1"></div>
          <div class="chart2"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
    </div>
    <el-dialog
      :title="'查看详情 数据更新时间：' + this.selectdate.date"
      :visible.sync="cityDataTableVisible"
    >
      <el-table
        :data="citydata"
        stripe
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        style="width: 100%"
        height="600"
        :default-sort="{ prop: 'newCount', order: 'descending' }"
      >
        <el-table-column property="city" label="城市"></el-table-column>
        <el-table-column
          property="nowCount"
          label="现有确诊"
          sortable
        ></el-table-column>

        <el-table-column property="newCount" label="新增确诊" sortable>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.newCount > 100" type="danger">
              {{ scope.row.newCount }}</el-tag
            >
            <el-tag
              v-if="scope.row.newCount <= 100 && scope.row.newCount > 10"
              type="warning"
            >
              {{ scope.row.newCount }}</el-tag
            >
            <el-tag v-if="scope.row.newCount <= 10 && scope.row.newCount > 0">
              {{ scope.row.newCount }}</el-tag
            >
            <el-tag v-if="scope.row.newCount == 0" type="success">
              {{ scope.row.newCount }}</el-tag
            >
          </template>
        </el-table-column>

        <el-table-column
          property="newdead"
          label="新增死亡"
          sortable
        ></el-table-column>
        <el-table-column
          property="deadCount"
          label="累计死亡"
          sortable
        ></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog :title="'查看新闻'" :visible.sync="newsDataTableVisible">
      <el-table
        :data="news"
        stripe
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        style="width: 100%"
        height="600"
        :default-sort="{ prop: 'pubDate', order: 'descending' }"
      >
        <el-table-column
          property="pubDate"
          label="日期"
          width="100"
          sortable
        ></el-table-column>
        <el-table-column
          property="title"
          label="新闻标题"
          sortable
        ></el-table-column>
        <el-table-column property="sourceUrl" label="地址">
          <template slot-scope="scope">
            <el-link type="primary" @click="linkto(scope.row.sourceUrl)">{{
              scope.row.sourceUrl
            }}</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
// 引入中国地图
import "./js/china";
import screenfull from "screenfull";
let chart = null;
export default {
  data() {
    return {
      isFullscreen: false,
      newsConfig: {
        header: ["时间", "标题"],
        data: [],
      },
      nowDate: "", // 当前日期
      cityrankdata: [
        {
          city: "台湾",
          count: 1386640,
        },
      ],
      proportion: [
        {
          now: 1111,
          new: 1,
          dead: 1,
          diagnosed: 11,
          cure: 11111,
        },
      ],
      mapdata: [
        {
          city: "台湾",
          count: 1386640,
        },
      ],
      vaccworld: [
        {
          country: "印度",
          count: 1907730016,
          count100: 136.91,
        },
      ],
      covline: [
        {
          countryName: "中国",
          new: 4653,
          now: 256755,
          diagnosed: 415480,
          dead: 10336,
          cure: 148389,
          date: "2022-03-15T16:00:00.000Z",
        },
      ],
      news: [
        {
          pubDate: "2022-04-19 03:17:00",
          title: "国家卫健委 | 昨日本土新增 3297 + 18187",
          summary:
            "4月18日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增新冠肺炎本土确诊病例3297例，新增本土无症状感染者18187例",
          infoSource: "央视新闻",
          sourceUrl: "https://mp.weixin.qq.com/s/ADKCJEehbp1E56k2SzJAkw",
        },
      ],
      mortalityratechina: [
        {
          pubDate: 0.5,
        },
      ],
      vaccrate: [
        {
          vaccrate: 100,
        },
      ],
      selectdate: { date: "2022-05-27" },
      vaccratedate: { date: "2022-05-13" },
      cityDataTableVisible: false,
      newsDataTableVisible: false,
      citydata: [
        {
          city: "台湾",
          nowCount: 699824,
          newCount: 63954,
          newdead: 40,
          deadCount: 1049,
        },
      ],
      pickerOptions: {
        disabledDate(time) {
          let curDate = 1653667260000;
          let threeMonths = 1647360060000;
          return time.getTime() > curDate || time.getTime() < threeMonths;
        },
      },
    };
  },
  watch: {
    selectdate: {
      handler(newName, oldName) {
        this.drawCityCovRank();
        this.drawleftProportion();
        this.drawrightProportion();
        this.setOptions();
        this.drawrightWater();
        this.getcitydata();
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.currentTime();
    this.drawCityCovRank();
    this.drawleftProportion();
    this.drawrightProportion();
    this.setOptions();
    this.drawWorldVacc();
    this.drawcovline();
    this.getnews();
    this.drawleftWater();
    this.drawrightWater();
    this.getcitydata();
  },
  methods: {
    // 画左上角top10排名的函数
    async drawCityCovRank() {
      // 向后端发请求（获取数据）
      let { data: res } = await this.$http.post(
        `bigscreen/rank`,
        this.selectdate
      );
      // 判断状态码 如果出错报错误提示
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg);
      } else {
        // 给cityrankdata赋值
        this.cityrankdata = res.data.cityrank;
      }
      // 处理好获取请求以后再绘制表格，不然只能拿到写死的数据
      this.$nextTick(() => {
        // 对数据进行处理
        let citydata = [];
        // 因为后端发送过来的数据直接就是排序完的，所以这里只需要遍历一下，在arr头部插入数据就行
        for (var i = 0; i < this.cityrankdata.length; i++) {
          // 过两遍JSON，不然拿到的是{observer}
          citydata.unshift(
            JSON.parse(JSON.stringify(this.cityrankdata[i])).city
          );
        }
        // 同上，只不过这个处理的是确诊数据
        let covdata = [];
        for (var i = 0; i < this.cityrankdata.length; i++) {
          covdata.unshift(
            JSON.parse(JSON.stringify(this.cityrankdata[i])).count
          );
        }
        // 开始画图，这句话是找到画图的地方
        var myChart = this.$echarts.init(
          document.querySelector(".citycovrank .chart")
        );
        // option是画图配置
        let option = {
          color: ["#2f89cf"],
          tooltip: {
            // 触发类型；轴触发，axis则鼠标hover到一条柱状图显示所有数据，item则鼠标hover到折线点显示相应数据
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          // 修改图表大小
          grid: {
            left: "0%",
            top: "4%",
            right: "4%",
            bottom: "4%",
            containLabel: true,
          },
          yAxis: {
            // type: "category",
            data: citydata,
            type: "category",
            //修改刻度
            axisLabel: {
              color: "rgba(255,255,255)",
              fontSize: "12",
            },
            // y轴线条样式
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 2,
                // type: "solid"
              },
            },
            // y 轴分隔线样式
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
          xAxis: {
            type: "value",
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              // 设置单独的线条样式
              lineStyle: {
                color: "rgba(255,255,255,.6)",
                width: 1,
                type: "solid",
              },
            },
          },
          series: [
            {
              label: {
                show: true,
                position: "right",
                color: "rgba(255,255,255)",
              },
              data: covdata,
              type: "bar",
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    // 画左边占比饼图的函数
    async drawleftProportion() {
      // 向后端发请求（获取数据）
      let { data: res } = await this.$http.post(
        `bigscreen/proportion`,
        this.selectdate
      );
      // 判断状态码 如果出错报错误提示
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg);
      } else {
        // 给proportion赋值
        this.proportion = res.data.proportion;
      }
      // 处理好获取请求以后再绘制表格，不然只能拿到写死的数据
      this.$nextTick(() => {
        // 对数据进行处理
        let nowdata = [];
        // 新建数组为Echarts要求的数据格式即可
        for (var i = 0; i < this.proportion.length; i++) {
          nowdata = [
            {
              value: JSON.parse(JSON.stringify(this.proportion[i])).now,
              name: "现有确诊",
            },
            {
              value: JSON.parse(JSON.stringify(this.proportion[i])).diagnosed,
              name: "累计确诊",
            },
          ];
        }
        // 开始画图，这句话是找到画图的地方
        var myChart = this.$echarts.init(
          document.querySelector(".proportion .chart1")
        );
        console.log(nowdata);
        // option是画图配置
        let option = {
          // 鼠标移上去显示一个小框框
          tooltip: {
            trigger: "item",
          },
          // 图片与两边的距离
          grid: {
            left: "0%",
            top: "4%",
            right: "4%",
            bottom: "4%",
            containLabel: true,
          },
          // 两个数据的颜色
          color: ["#d32e58", "#2f89cf"],
          // 图表标题以及放哪里
          title: {
            text: "现有确诊",
            left: "center",
            bottom: "bottom",
            textStyle: {
              color: "#fff", //'red'，字体颜色
              fontStyle: "normal", //'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格
              fontWeight: "normal", //'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细
              fontSize: 10, //字体大小
              lineHeight: 10, //字体行高
            },
          },
          series: [
            {
              name: "现有确诊",
              type: "pie",
              radius: ["40%", "65%"],
              avoidLabelOverlap: true,
              // 边框
              itemStyle: {
                borderRadius: 5,
                borderColor: "#fff",
                borderWidth: 0.5,
              },
              label: {
                show: false,
                position: "center", //放中间
                // padding: ["50%", "50%"],
                // fontSize: "10px", //字体大小
                formatter: "{d}%", //显示百分比
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "20px",
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: nowdata,
              // 初始化echarts的动画效果
              animationType: "scale",
              animationEasing: "elasticOut",
              animationDelay: function (idx) {
                return Math.random() * 200;
              },
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    // 画右边占比饼图的函数
    async drawrightProportion() {
      // 向后端发请求（获取数据）
      let { data: res } = await this.$http.post(
        `bigscreen/proportion`,
        this.selectdate
      );
      // 判断状态码 如果出错报错误提示
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg);
      } else {
        // 给proportion赋值
        this.proportion = res.data.proportion;
      }
      // 处理好获取请求以后再绘制表格，不然只能拿到写死的数据
      this.$nextTick(() => {
        // 对数据进行处理
        let nowdata = [];
        // 新建数组为Echarts要求的数据格式即可
        for (var i = 0; i < this.proportion.length; i++) {
          nowdata = [
            {
              value: JSON.parse(JSON.stringify(this.proportion[i])).dead,
              name: "死亡",
            },
            {
              value: JSON.parse(JSON.stringify(this.proportion[i])).diagnosed,
              name: "确诊",
            },
          ];
        }
        // 开始画图，这句话是找到画图的地方
        var myChart = this.$echarts.init(
          document.querySelector(".proportion .chart2")
        );
        // option是画图配置
        let option = {
          // 鼠标移上去显示一个小框框
          tooltip: {
            trigger: "item",
          },
          // 图片与两边的距离
          grid: {
            left: "0%",
            top: "4%",
            right: "4%",
            bottom: "4%",
            containLabel: true,
          },
          // 两个数据的颜色
          color: ["#d32e58", "#2f89cf"],
          // 图表标题以及放哪里
          title: {
            text: "累计死亡",
            left: "center",
            bottom: "bottom",
            textStyle: {
              color: "#fff", //'red'，字体颜色
              fontStyle: "normal", //'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格
              fontWeight: "normal", //'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细
              fontSize: 10, //字体大小
              lineHeight: 10, //字体行高
            },
          },
          series: [
            {
              name: "累计死亡",
              type: "pie",
              radius: ["40%", "65%"],
              avoidLabelOverlap: true,
              // 边框
              itemStyle: {
                borderRadius: 5,
                borderColor: "#fff",
                borderWidth: 0.5,
              },
              label: {
                show: false,
                position: "center", //放中间
                fontSize: "10px", //字体大小
                formatter: "{d}%", //显示百分比
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "20px",
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: nowdata,
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    // 画中间地图的函数
    async setOptions() {
      let { data: res } = await this.$http.post(
        `bigscreen/mapdata`,
        this.selectdate
      );
      // 判断状态码 如果出错报错误提示
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg);
      } else {
        // 给mapdata赋值
        this.mapdata = res.data.mapdata;
      }
      // 处理好获取请求以后再绘制表格，不然只能拿到写死的数据
      this.$nextTick(() => {
        // 对数据进行处理
        let maplist = [];
        // 新建数组为Echarts要求的数据格式即可
        for (var i = 0; i < this.mapdata.length; i++) {
          maplist.unshift({
            value: JSON.parse(JSON.stringify(this.mapdata[i])).count,
            name: JSON.parse(JSON.stringify(this.mapdata[i])).city,
          });
        }
        let option = {
          tooltip: {
            triggerOn: "click",
            formatter: function (e, t, n) {
              return 0.5 == e.value
                ? e.name + "：有疑似病例"
                : e.seriesName + "<br />" + e.name + "：" + e.value;
            },
          },
          title: {
            text: this.title,
            top: 50,
            left: "center",
            textStyle: {
              fontWeight: "bolder",
              fontSize: 24,
              color: "#BCBCBF",
            },
          },
          visualMap: {
            min: 0,
            max: 1000,
            left: 26,
            bottom: 40,
            showLabel: !0,
            textStyle: {
              color: "rgba(255,255,255,0.7)",
            },
            // 图例
            pieces: [
              {
                gt: 10000,
                label: "> 10000 人",
                color: "#5D0773",
              },
              {
                gte: 3000,
                lte: 10000,
                label: "3000 - 10000 人",
                color: "#26254F",
              },
              {
                gte: 1000,
                lt: 3000,
                label: "1000 - 3000 人",
                color: "#2D2D83",
              },
              {
                gt: 100,
                lt: 1000,
                label: "100 - 1000 人",
                color: "#2B4AD0",
              },
              {
                gt: 0,
                lt: 100,
                label: "< 100 人",
                color: "#394064",
              },
            ],
            show: !0,
          },
          geo: {
            map: "china",
            roam: true, // 开启缩放和平移
            scaleLimit: {
              min: 1, // 最小缩放
              max: 15, // 最大缩放
            },
            zoom: 1.23, // 当前视角的缩放比例
            // top: 120,
            label: {
              normal: {
                show: !0,
                fontSize: "14",
                color: "rgba(255,255,255,0.7)",
              },
            },
            itemStyle: {
              normal: {
                // color: '#FFF',
                areaColor: "#323c48",
                shadowBlur: 10,
                shadowColor: "rgba(0, 0, 0, 0.5)", // 外发光
                borderColor: "rgba(0, 0, 0, 0.2)",
              },
              emphasis: {
                // color: "#FFF",
                areaColor: "#1E1D3C", // 悬浮区背景，就是鼠标移到区域上变的颜色
                // areaColor: '#2a333d',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                borderWidth: 0,
              },
            },
          },
          series: [
            {
              name: "确诊病例",
              type: "map",
              geoIndex: 0,
              data: maplist,
            },
          ],
        };
        // 找到画图的地儿
        var myChart = this.$echarts.init(document.querySelector(".map .chart"));
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    // 画右边疫苗排名的函数
    async drawWorldVacc() {
      // 向后端发请求（获取数据）
      let { data: res } = await this.$http.post(`bigscreen/vaccworld`);
      // 判断状态码 如果出错报错误提示
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg);
      } else {
        // 给cityrankdata赋值
        this.vaccworld = res.data.vaccworld;
      }
      // 处理好获取请求以后再绘制表格，不然只能拿到写死的数据
      this.$nextTick(() => {
        // 对数据进行处理
        let countrydata = [];
        // 因为后端发送过来的数据直接就是排序完的，所以这里只需要遍历一下，在arr头部插入数据就行
        for (var i = 0; i < this.vaccworld.length; i++) {
          // 过两遍JSON，不然拿到的是{observer}
          countrydata.unshift(
            JSON.parse(JSON.stringify(this.vaccworld[i])).country
          );
        }
        // 同上
        let countdata = [];
        for (var i = 0; i < this.vaccworld.length; i++) {
          countdata.unshift(
            JSON.parse(JSON.stringify(this.vaccworld[i])).count / 10000000
          );
        }
        // 同上
        let count100data = [];
        for (var i = 0; i < this.vaccworld.length; i++) {
          count100data.unshift(
            JSON.parse(JSON.stringify(this.vaccworld[i])).count100
          );
        }
        // console.log(countrydata);
        // console.log(countdata);
        // console.log(count100data);
        let option = {
          // backgroundColor:"#293c55",
          tooltip: {
            trigger: "axis",
          },
          grid: {
            left: "0%",
            // top: "0%",
            right: "10%",
            // bottom: "2%",
            containLabel: true,
          },
          legend: {
            itemWidth: 15, //设置legend图标的宽度
            itemHeight: 15, //设置legend图标的高度
            right: 60, //设置legend的位置
            // data: [
            // {name:"蒸发量",icon:"rect"},
            // {name:"降水量",icon:"rect"}
            // ],
            textStyle: {
              color: "rgba(255,255,255,.6)",
            },
          },
          calculable: true,
          yAxis: [
            {
              type: "category",
              data: countrydata,
              axisTick: {
                show: false,
              },
              splitLine: {
                //设置分割线
                show: true,
                lineStyle: {
                  color: "#ffffff",

                  type: "solid",
                },
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
                interval: 0, //解决echarts数值因文字较多显示不全问题
              },
              axisLine: {
                // 设置轴线是否显示
                lineStyle: {
                  color: "#ffffff",
                },
              },
            },
          ],
          xAxis: [
            {
              // name: "(接种数/百人)",
              max: 400,
              interval: 100, //控制y轴的刻度
              type: "value",
              axisTick: {
                //控制y轴的刻度
                show: false,
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#ffffff",
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#ffffff",

                  type: "solid",
                },
              },
              nameTextStyle: {
                color: "#FFF",
              },
            },
            {
              // name: "(千万次)",
              min: 0,
              max: 400,

              // interval:20,  //控制y轴的分段
              type: "value",
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#ffffff",
                },
              },
              lineStyle: {
                color: ["#ffffff"],

                type: "solid",
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#ffffff",

                  type: "solid",
                },
              },
              nameTextStyle: {
                color: "#FFF",
              },
            },
          ],
          series: [
            {
              name: "接种剂次(千万)",
              type: "bar",
              xAxisIndex: 1,
              data: countdata,
              itemStyle: {
                color: "#045c91",
              },
            },
            {
              name: "接种数/百人",
              type: "bar",

              data: count100data,

              itemStyle: {
                color: "#36b6fd",
              },
            },
          ],
        };
        // 开始画图，这句话是找到画图的地方
        var myChart = this.$echarts.init(
          document.querySelector(".covworld .chart")
        );
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    // 画右上角新增折线图的函数
    async drawcovline() {
      // 向后端发请求（获取数据）
      let { data: res } = await this.$http.post(`bigscreen/covline`);
      // 判断状态码 如果出错报错误提示
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg);
      } else {
        // 给covline赋值
        this.covline = res.data.covline;
      }
      // 处理好获取请求以后再绘制表格，不然只能拿到写死的数据
      this.$nextTick(() => {
        // 对数据进行处理
        let datedata = [];
        // 因为后端发送过来的数据直接就是排序完的，所以这里只需要遍历一下，在arr头部插入数据就行
        for (var i = 0; i < this.covline.length; i++) {
          // 过两遍JSON，不然拿到的是{observer}
          datedata.push(JSON.parse(JSON.stringify(this.covline[i])).date);
        }
        // 同上
        let newdata = [];
        for (var i = 0; i < this.covline.length; i++) {
          newdata.push(JSON.parse(JSON.stringify(this.covline[i])).new);
        }
        let nowdata = [];
        for (var i = 0; i < this.covline.length; i++) {
          nowdata.push(JSON.parse(JSON.stringify(this.covline[i])).diagnosed);
        }
        let deaddata = [];
        for (var i = 0; i < this.covline.length; i++) {
          deaddata.push(JSON.parse(JSON.stringify(this.covline[i])).dead);
        }
        let curedata = [];
        for (var i = 0; i < this.covline.length; i++) {
          curedata.push(JSON.parse(JSON.stringify(this.covline[i])).cure);
        }
        let option = {
          color: ["green", "#a55e00", "#2f89cf", "#d32e58"],
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: ["新增", "确诊", "治愈", "死亡"],
            textStyle: {
              color: "#ffffff",
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              color: "rgba(255,255,255)",
            },
            data: datedata,
          },
          yAxis: {
            type: "value",
            axisLabel: {
              color: "rgba(255,255,255)",
            },
          },
          series: [
            {
              name: "治愈",
              type: "line",
              // stack: 'Total',
              symbol: "none",
              data: curedata,
            },
            {
              name: "确诊",
              type: "line",
              // stack: 'Total',
              symbol: "none",
              data: nowdata,
            },
            {
              name: "新增",
              type: "line",
              // stack: 'Total',
              symbol: "none",
              data: newdata,
            },
            {
              name: "死亡",
              type: "line",
              // stack: 'Total',
              symbol: "none",
              data: deaddata,
            },
          ],
        };

        // console.log(count100data);
        // 开始画图，这句话是找到画图的地方
        var myChart = this.$echarts.init(
          document.querySelector(".covline .chart")
        );
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    // 获取新闻数据函数
    async getnews() {
      let { data: res } = await this.$http.post(`bigscreen/news`);
      // 判断状态码 如果出错报错误提示
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg);
      } else {
        // 给covline赋值
        this.news = res.data.news;
      }
      this.$nextTick(() => {
        let newArr = [];
        for (var i = 0; i < this.news.length; i++) {
          // 过两遍JSON，不然拿到的是{observer}
          newArr.push([
            JSON.parse(JSON.stringify(this.news[i])).pubDate,
            JSON.parse(JSON.stringify(this.news[i])).title,
          ]);
        }
        this.newsConfig = {
          header: ["时间", "标题"],
          data: newArr,
          rowNum: 7, // 表行数
          headerBGC: "", // 表头背景色
          oddRowBGC: "", // 奇数行背景色
          evenRowBGC: "", // 偶数行背景色
          waitTime: 2000, // 轮播时间间隔(ms)
          align: "center",
          columnWidth: [100],
        };
      });
    },
    // 画右下角左边水滴图的函数
    async drawleftWater() {
      let { data: res } = await this.$http.post(
        `bigscreen/mortalityratechina`,
        this.selectdate
      );
      // 判断状态码 如果出错报错误提示
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg);
      } else {
        // 给covline赋值
        this.mortalityratechina = res.data.mortalityratechina;
      }
      // 处理好获取请求以后再绘制表格，不然只能拿到写死的数据
      this.$nextTick(() => {
        // 因为后端发送过来的数据直接就是排序完的，所以这里只需要遍历一下，在arr头部插入数据就行
        let newArr = [];
        for (var i = 0; i < this.mortalityratechina.length; i++) {
          // 过两遍JSON，不然拿到的是{observer}
          newArr.unshift([
            JSON.parse(JSON.stringify(this.mortalityratechina[i])).dead,
          ]);
        }
        // 开始画图，这句话是找到画图的地方
        var myChart = this.$echarts.init(
          document.querySelector(".water .chart1")
        );
        // option是画图配置
        let option = {
          series: [
            {
              type: "liquidFill",
              data: newArr,
              label: {
                formatter: function (param) {
                  return "死亡率" + "\n" + param.value * 100 + "%";
                },
                fontSize: 10,
              },
              // 修改图表大小
              outline: {
                show: false,
              },
              shape: "circle",
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    // 画右下角右边水滴图的函数
    async drawrightWater() {
      let { data: res } = await this.$http.post(
        `bigscreen/vaccrate`,
        this.vaccratedate
      );
      // 判断状态码 如果出错报错误提示
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg);
      } else {
        // 给covline赋值
        this.vaccrate = res.data.vaccrate;
      }
      // 处理好获取请求以后再绘制表格，不然只能拿到写死的数据
      this.$nextTick(() => {
        let newArr = [];
        for (var i = 0; i < this.vaccrate.length; i++) {
          // 过两遍JSON，不然拿到的是{observer}
          newArr.unshift(
            (
              [JSON.parse(JSON.stringify(this.vaccrate[i])).vaccrate] / 300
            ).toFixed(4)
          );
        }
        // 让图片好看点 push两个图层
        newArr.push(0.6);
        newArr.push(0.45);
        // 开始画图，这句话是找到画图的地方
        var myChart = this.$echarts.init(
          document.querySelector(".water .chart2")
        );
        // option是画图配置
        let option = {
          series: [
            {
              type: "liquidFill",
              data: newArr,
              label: {
                formatter: function (param) {
                  return "接种率" + "\n" + param.value * 100 + "%";
                },
                fontSize: 10,
              },
              // 修改图表大小
              outline: {
                show: false,
              },
              shape: "circle",
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    async getcitydata() {
      let { data: res } = await this.$http.post(
        `bigscreen/citydata`,
        this.selectdate
      );
      // 判断状态码 如果出错报错误提示
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg);
      } else {
        // 给covline赋值
        this.citydata = res.data.citydata;
        // console.log(this.citydata);
      }
    },

    // 按按钮跳转到Login
    toManagerLogin() {
      this.$router.push("welcome");
    },
    toManagerWorld() {
      this.$router.push("bigscreenworld");
    },

    // 半秒钟获取一次当前时间
    currentTime() {
      setInterval(this.formatDate, 500);
    },
    // 获取时间函数和时间处理函数
    formatDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.nowDate = `${year}年${month}月${day}日${hour}:${minute}:${second} ${weekArr[week]}`;
    },
    changeCityDataTableVisible() {
      this.cityDataTableVisible = true;
    },
    changeNewsDataTableVisible() {
      this.newsDataTableVisible = true;
    },
    linkto(url) {
      window.open(url);
    },
    init() {
      if (screenfull.isEnabled) {
        screenfull.on("change", this.fullChange);
      }
    },
    //切换
    fullScreen() {
      if (!screenfull.isEnabled) {
        return false;
      }
      //全屏
      screenfull.toggle();
    },
    fullChange() {
      this.isFullscreen = screenfull.isFullscreen;
    },
  },
  destroy() {
    if (screenfull.isEnabled) {
      screenfull.off("change", this.fullChange);
    }
  },
  beforeDestroy() {
    if (this.formatDate) {
      clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
    }
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.chartusa {
  height: 7rem;
  // background-color: pink;
}
.datepicker {
  // background-color: #000;
  /deep/ .el-input__inner {
    background-color: rgba(0, 0, 0, 0) !important;
    color: rgba(255, 255, 255, 0.7);
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
  }
}

li {
  list-style: none;
}

.bigscreen {
  background: url(./images/bg.jpg) no-repeat top center;
  line-height: 1.15;
}

.prefix-icon-class {
  display: none;
}

.head {
  position: relative;
  height: 1.25rem;
  background: url(./images/head_bg.png) no-repeat;
  background-size: 100% 100%;

  h1 {
    font-size: 0.475rem;

    color: #fff;
    text-align: center;
    line-height: 1rem;
  }

  .toManager {
    position: absolute;
    left: 0.375rem;
    top: 0;
    line-height: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.25rem;

    a {
      text-align: none;
      color: rgba(255, 255, 255, 0.7);
    }
  }

  .showTime {
    position: absolute;
    right: 0.375rem;
    top: 0;
    line-height: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.25rem;
  }
}

.mainbox {
  min-width: 1024px;
  max-width: 1920px;
  padding: 0.125rem 0.125rem 0;
  display: flex;

  .column {
    flex: 2.5;

    &:nth-child(2) {
      flex: 7;
      margin: 0 0.125rem 0.1875rem;
      overflow: hidden;
    }
  }
}

.panellong {
  position: relative;
  height: 5.8125rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: url(./images/line\(1\).png) rgba(255, 255, 255, 0.03);
  padding: 0 0.1875rem 0.5rem;
  margin-bottom: 0.1875rem;

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
  }

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
  }

  .panel-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;

    &::before {
      position: absolute;
      bottom: 0;
      left: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
    }

    &::after {
      position: absolute;
      bottom: 0;
      right: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
    }
  }

  h2 {
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
    color: #fff;
    font-size: 0.2rem;
    font-weight: 400;
  }

  .chart {
    height: 5.4rem;
    // background-color: pink;
  }
}
.panelmid {
  position: relative;
  height: 3.875rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: url(./images/line\(1\).png) rgba(255, 255, 255, 0.03);
  padding: 0 0.1875rem 0.5rem;
  margin-bottom: 0.1875rem;

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
  }

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
  }

  .panel-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;

    &::before {
      position: absolute;
      bottom: 0;
      left: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
    }

    &::after {
      position: absolute;
      bottom: 0;
      right: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
    }
  }

  h2 {
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
    color: #fff;
    font-size: 0.2rem;
    font-weight: 400;
  }

  .chart {
    height: 3rem;
    // background-color: pink;
  }
}
.panelsmall {
  position: relative;
  height: 1.9375rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: url(./images/line\(1\).png) rgba(255, 255, 255, 0.03);
  padding: 0 0.1875rem 0.5rem;
  margin-bottom: 0.1875rem;

  // .water-level-pond {
  //   align-content: center;
  // }
  // p {
  //   text-align: center;
  //   color: #fff;
  // }

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
  }

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
  }

  .panel-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;

    &::before {
      position: absolute;
      bottom: 0;
      left: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
    }

    &::after {
      position: absolute;
      bottom: 0;
      right: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
    }
  }

  h2 {
    height: 0.3rem;
    line-height: 0.3rem;
    text-align: center;
    color: #fff;
    font-size: 0.2rem;
    font-weight: 400;
  }

  .chart1 {
    position: absolute;
    height: 1.5rem;
    width: 45%;
    // background-color: pink;
    left: 0.2rem;
  }
  .chart2 {
    // margin-left: 10px;
    position: absolute;
    height: 1.5rem;
    right: 0.2rem;
    width: 45%;
    // background-color: yellow;
  }
}

//no数字模块
/* 声明字体*/
@font-face {
  font-family: electronicFont;
  src: url(./font/D-DIN-Bold.ttf);
}

.el-input__inner {
  color: #ffffff;
  background: rgba(255, 255, 255, 0);
  border: 0px;
}

.no {
  background: rgba(101, 132, 226, 0.1);
  padding: 0.1875rem;

  .no-hd {
    position: relative;
    border: 1px solid rgba(25, 186, 139, 0.17);

    &::before {
      content: "";
      position: absolute;
      width: 30px;
      height: 10px;
      border-top: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
      top: 0;
      left: 0;
    }

    &::after {
      content: "";
      position: absolute;
      width: 30px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
      right: 0;
      bottom: 0;
    }

    ul {
      display: flex;

      li {
        position: relative;
        flex: 1;
        text-align: center;
        height: 1rem;
        line-height: 1rem;
        font-size: 0.65rem;
        color: #ffffff;
        padding: 0.05rem 0;
        font-family: electronicFont;
        font-weight: bold;

        &::after {
          content: "";
          position: absolute;
          height: 50%;
          width: 1px;
          background: rgba(255, 255, 255, 0.2);
          right: 0;
          top: 25%;
        }
      }
      .dead {
        color: rgb(255, 123, 123);
      }
      .cure {
        color: rgb(138, 255, 138);
      }
      .new {
        color: #02a6b5;
      }
    }
  }

  .no-bd ul {
    display: flex;

    li {
      flex: 1;
      height: 0.5rem;
      line-height: 0.5rem;
      text-align: center;
      font-size: 0.225rem;
      color: rgba(255, 255, 255, 0.7);
      padding-top: 0.125rem;
    }
  }
}

.map {
  position: relative;
  height: 10.125rem;

  .chart {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    height: 10.125rem;
    width: 100%;
  }

  .map1,
  .map2,
  .map3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6.475rem;
    height: 6.475rem;
    background: url(./images/map.png) no-repeat;
    background-size: 100% 100%;
    opacity: 0.3;
  }

  .map2 {
    width: 8.0375rem;
    height: 8.0375rem;
    background-image: url(./images/lbx.png);
    opacity: 0.6;
    animation: rotate 15s linear infinite;
    z-index: 2;
  }

  .map3 {
    width: 7.075rem;
    height: 7.075rem;
    background-image: url(./images/jt.png);
    animation: rotate1 10s linear infinite;
  }

  @keyframes rotate {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  @keyframes rotate1 {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }
}
</style>